import React, { useState } from "react";
import { Layout, Menu, Breadcrumb } from "antd";
import { UserOutlined, LaptopOutlined } from "@ant-design/icons";
import { Redirect, Route, Switch } from "react-router-dom";
import { homePath } from "../../../routers";

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

function Home(props) {
  //路径显示
  const [breadcrumb, setBreadcrum] = useState("APP");
  //侧边导航跳转
  const goToPage = (value) => {
    setBreadcrum(value.keyPath[1]);
    props.history.push(value.key);
  };
  return (
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          style={{ height: "100%", borderRight: 0 }}
        >
          <SubMenu key="地图展示" icon={<UserOutlined />} title="地图展示">
            <Menu.Item
              key="/admin/home/bingmap"
              id="HomeMenu_1_1"
              onClick={goToPage}
            >
              Bing地图展示
            </Menu.Item>
            <Menu.Item
              key="/admin/home/shpmap"
              id="HomeMenu_1_2"
              onClick={goToPage}
            >
              矢量图层展示
            </Menu.Item>
          </SubMenu>
          <SubMenu key="最新资讯" icon={<LaptopOutlined />} title="最新资讯">
            <Menu.Item key="/admin/home/news" onClick={goToPage}>
              公告
            </Menu.Item>
            <Menu.Item key="/admin/home/notice" onClick={goToPage}>
              资讯
            </Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: "0 24px 24px" }}>
        <Breadcrumb style={{ margin: "16px 0" }}>
          <Breadcrumb.Item>管理员</Breadcrumb.Item>
          <Breadcrumb.Item>文件管理</Breadcrumb.Item>
          <Breadcrumb.Item>{breadcrumb}</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          <Switch>
            {homePath.map((router) => {
              return (
                <Route
                  key={router.path}
                  path={router.path}
                  exact={router.exact}
                  component={router.component}
                />
              );
            })}
            <Redirect to="/admin/home/bingmap" from="/admin/home"/>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  );
}

export default Home;
